<template>
	<view class="page" :style="loading ? 'opacity: 0;' : 'opacity: 1;'">
		<image src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/top-bg.png" class="bg-color"
			mode="aspectFill"></image>

		<z-paging ref="paging" bg-color="rgba(0,0,0,0)" v-model="dataList" @query="queryList">
			<uv-navbar slot="top" bgColor="rgba(0,0,0,0)" leftIcon=" " :fixed="true" title="报修列表" placeholder></uv-navbar>

			<view class="list-box">
				<view class="list-item" v-for="(item, idx) in dataList" :key="idx" @click="navToDetail(item.id)">
					<view class="list-item-title">{{item.project_name}}</view>
					<view class="list-item-data">
						<view class="list-item-data-lable-box">
							<uv-tags :text="item.brand_name" size="mini" :bgColor="`${item.brand_colour}33`"
								:color="item.brand_colour" borderColor="rgba(0,0,0,0)"></uv-tags>

							<uv-tags v-if="item.after_sales_status == '待处理'" text="待处理" size="mini" bgColor="rgba(255, 172, 59, .15)"
								color="#FF9C0E" borderColor="rgba(0,0,0,0)"></uv-tags>
							<uv-tags v-if="item.after_sales_status == '进行中'" text="进行中" size="mini" bgColor="rgba(88, 174, 67, .15)"
								color="#58AE43" borderColor="rgba(0,0,0,0)"></uv-tags>
							<uv-tags v-if="item.after_sales_status == '已完成'" text="已完成" size="mini" bgColor="rgba(59, 117, 255, .15)"
								color="#3B75FF" borderColor="rgba(0,0,0,0)"></uv-tags>
						</view>
						<view class="list-item-data-item">
							<view class="label">工单编号</view>
							<view class="desc">{{item.after_sales_number}}</view>
						</view>
						<view class="list-item-data-item">
							<view class="label">报修内容</view>
							<view class="desc">{{item.problem_content}}</view>
						</view>
						<view class="list-item-data-item">
							<view class="label">创建时间</view>
							<view class="desc">{{item.created_at}}</view>
						</view>

						<view class="attachment-box">
							<template v-for="(row, index) in item.after_sales_files">
								<view class="attachment-item" v-if="index < 3" :key="index">
									<image :src="row.file_url" mode="aspectFill" class="img" v-if="is_img(row.file_suffix) == 'img'">
									</image>
									<view class="video-box" style="background-color: #111111;" v-if="is_img(row.file_suffix) == 'video'">
										<uv-icon name="play-right-fill" color="#ffffff" size="40rpx"></uv-icon>
									</view>
								</view>
							</template>
							<view class="attachment-item" v-if="item.after_sales_files.length > 3">
								<image :src="item.after_sales_files[3].file_url" mode="aspectFill" class="img"
									v-if="is_img(item.after_sales_files[3].file_suffix) == 'img'"></image>
								<view class="more">
									<span style="line-height: 22rpx;height: 30rpx;">+ </span>{{item.after_sales_files.length - 3}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<image slot="empty" class="no-data" src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png"
				mode="widthFix"></image>
			<!-- 尾部 -->
			<tabbar slot="bottom" ref="tabbar"></tabbar>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				dataList: [],
			}
		},
		onShow() {
			this.$refs.tabbar.getUserInfo()
		},
		onLoad() {
			uni.hideTabBar();
			setTimeout(() => {
				this.loading = false
			}, 300)
		},
		methods: {
			is_img(type) {
				let app = getApp()
				let img_type_arr = app.globalData.imgExtensions
				let video_type_arr = app.globalData.videoExtensions

				if (img_type_arr.indexOf(type) != -1) {
					return 'img'
				} else if (video_type_arr.indexOf(type) != -1) {
					return 'video'
				} else {
					return 'other'
				}
			},
			navToDetail(id) {
				uni.navigateTo({
					url: '/pages/repair_detail/repair_detail?id=' + id
				});
			},
			queryList(page, num) {
				this.getList({
					page,
					num,
				})
			},
			getList(obj) {
				this.$Api.khAfterSalesList(obj).then(res => {
					console.log(res, '获取列表');
					if (res.code == 200) {
						this.$refs.paging.complete(res.data.list);
					} else {
						this.$refs.paging.complete([]);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "index.scss";
</style>